import React from 'react';
import ReactDom from 'react-dom';

/**
 * 一个组件的基础
 * 组件可以拥有其自己的“状态”。这使我们能够重复多次使用相同的组件但却让它们看起来完全不同，因为每个组件实例的状态是唯一的。
 * 当你通过传递属性到一个组件时这些被称为属性。不要只局限于 HTML 属性，你可以传递任何你想传递的东西，并在组件内通过 this.props 访问它。
 * 这样使得我们能够重复使用相同的组件但传递一组不同的属性，比如组件的“配置”。
 */




/**
 * 属性
 */
var navigationConfig = [];
 
var Navigation = React.createClass({
    render: function () {
        return (
            <div className="navigation">
                 {
                     console.dir(this.props.config)
                 }
            </div>
            );
    }
});
 
//React.render(<Navigation config={ navigationConfig } />, document.body);
//export default Navigation;


/**
 * 状态
 * 每一个组件都有其自己的”状态”。当要使用状态时，你要定义初始状态，让后才可以使用 this.setState 来更新状态 * 
 */
var navigationConfig = [];
 
var Navigation = React.createClass({
    //添加一个 getInitialState 函数到类配置对象上，并返回带有我们想要的初始状态的对象。
    getInitialState: function () {
        return {
            openDropdown: -1
        };
    },
    render: function () {
        return (
            <div className="navigation">
                 {
                     console.dir(this.state.openDropdown)
                 }
            </div>
            );
    }
});
 
//React.render(<Navigation config={ navigationConfig } />, document.body);
export default Navigation;